<template>
    <van-sticky>
        <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="box">
        <div class="left">
            <van-sidebar v-model="active">
                <van-sidebar-item v-for="item in fenleiList" :title="item.cat_name" />

            </van-sidebar>

        </div>

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />

                <div class="right">
                    <van-grid :column-num="3" v-for="item in fenleiList[active]?.children">
                        <van-grid-item v-for="value in item.children" :key="value.cat_id" :icon="value.cat_icon"
                            :text="value.cat_name" @click="goods(value.cat_id)" />
                    </van-grid>

                </div>
            </van-list>
        </van-pull-refresh>



    </div>
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />

</template>

<script setup>
import { ref } from "vue";
const active = ref(0)
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute()
import { useFenleiStore } from '../store'
import { storeToRefs } from 'pinia'
const { fenleiList } = storeToRefs(useFenleiStore())
const { FENLEI } = useFenleiStore();
FENLEI()
const onClickLeft = () => history.back();

const goods = (cid) => {
    router.push({
        path: '/Goods',
        query: {
            cid
        }
    })
}


const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 1000);
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};
</script>

<style lang="scss" scoped>
.box {
    display: flex;
}

.left {
    width: 100px;
}

.right {
    flex: 1;
}
</style>